import { Space, Input, Button, Image, message } from 'antd';
import { useState } from 'react';
import { useNavigate,useLocation } from 'react-router-dom';
import axios from 'axios'
// import { addBanner } from '../../api/banner';

// 端口号
interface IBannerParams {
  id: string,
  bannerPic: string
}


type AddDwProps = {}




export const AddDw = (props: AddDwProps) => {

const baseURL = 'http://localhost:12580/bannerHomeBottom'

  const addBanner = async () => {
    let indexId
    axios({
      url: baseURL,
      method: 'get'
    }).then((res) => {
      indexId = res.data.length + 1
      console.log(indexId)
    })
    await axios({
      url: baseURL,
      method: 'post',
      data: {
        id: indexId,
        bannerPic: url
      }
    }).then(res => {
      console.log(res.data)
    })

  }


  // const [id, setId] = useState<string>('')
  const [url, setUrl] = useState('')

  const getImgUrl = () => {
    const img = document.getElementById('img') as HTMLInputElement
    const files = img && img.files
    const file = files && files[0]
    const reader = new FileReader()
    reader.readAsDataURL(file!)
    reader.onload = function () {
      setUrl(this.result!.toString())
    }
  }
  const navigate = useNavigate()
  return (
    <Space direction='vertical' style={{ width: '100%' }}>
      {/* <Input placeholder='id信息' value={ id } onChange = { e=> setId(e.target.value) }/> */}
      <Input type="file" id='img' onChange={getImgUrl} />
      <div>
        预览图片:
        <Image src={url} width={300} />
      </div>
      <Button type='primary'
        onClick={() => {
          addBanner().then(() => {
            navigate('/banner/listdw')
          })
        }}
      >添加</Button>
    </Space>
  );
}